<!DOCTYPE html>
<html>
<head>
    <title>我的数据</title>
<#include "/common/include_header.ftl">
    <script src="/static/js/echarts.js"></script>
</head>
<body>

<#include "/common/include_top.ftl">

<div class="layui-container fly-marginTop fly-user-main">

<#include "/common/include_menu.ftl">

    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>

    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>


    <div class="fly-panel fly-panel-user" pad20>


        <div id="main" style="width: 600px;height:400px;"></div>


    </div>
</div>

<script>

    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {},
        series: [{
            name: '',
            type: 'line',
            areaStyle: {},
            data: []
        }]
    });

    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

    var names=[];    //类别数组（实际用来盛放X轴坐标值）
    var valueA=[];    //销量数组（实际用来盛放Y坐标值）
    var valueB=[];    //销量数组（实际用来盛放Y坐标值）
    var valueC=[];    //销量数组（实际用来盛放Y坐标值）
    var valueD=[];    //销量数组（实际用来盛放Y坐标值）
    var valueE=[];    //销量数组（实际用来盛放Y坐标值）

    $.ajax({
        type : "post",
        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "/json/data/${dataInfo.id}/info",    //请求发送到TestServlet处
        data : {},
        dataType : "json",        //返回数据形式为json
        success : function(rd) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (rd) {
                var result = rd.data;
                for(var i=0;i<result.length;i++){
                    names.push(result[i].name);    //挨个取出类别并填入类别数组
                }
            <#--if ("${dataInfo.valueA}" == "true") {-->
                for(var i=0;i<result.length;i++){
                    valueA.push(result[i].valueA);    //挨个取出销量并填入销量数组
                }
//                }
            <#--if ("${dataInfo.valueB}) {-->
            <#--for(var i=0;i<result.length;i++){-->
            <#--value.push(result[i].valueB);    //挨个取出销量并填入销量数组-->
            <#--}-->
            <#--}-->
            <#--if (${dataInfo.valueC}) {-->
            <#--for(var i=0;i<result.length;i++){-->
            <#--value.push(result[i].valueC);    //挨个取出销量并填入销量数组-->
            <#--}-->
            <#--}-->
            <#--if ("${dataInfo.valueD}") {-->
            <#--for(var i=0;i<result.length;i++){-->
            <#--value.push(result[i].valueD);    //挨个取出销量并填入销量数组-->
            <#--}-->
            <#--}-->
            <#--if (${dataInfo.valueE}) {-->
            <#--for(var i=0;i<result.length;i++){-->
            <#--value.push(result[i].valueE);    //挨个取出销量并填入销量数组-->
            <#--}-->
            <#--}-->


                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    title: {
                        boundaryGap: false,
                        text: '${dataInfo.title}'
                    },
                    legend: {
                        data:['${dataInfo.valueAName}']
                    },
                    xAxis: {
                        data: names
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '${dataInfo.valueAName}',
                        type: 'scatter',
                        data: valueA
                    }]
                });

            }

        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    })














</script>











<#include "/common/include_footer.ftl">
<#include "/common/include_js.ftl">
</body>
</html>